@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.web{
    header {
        width: 100%;
        height: 8.2vw;
        display: flex;

        .logo {
            flex-grow: 3;
            display: flex;
            margin-left: 2.78vw;
            align-items: center;
            .bos {
                height: 5.35vw;
                overflow: hidden;
                img {
                    height: 5.35vw;
                }
            }
        }
        .title {
            display: flex;
            flex-grow: 5;
            align-items: center;
            justify-content: space-between;
            .home {
                width: 7.04vw;
                height: 5.14vw;
                text-align: center;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                position: relative;
                visibility: hidden;
                transform: rotate(45deg);
                .box1 {
                    width: 7.71vw;
                    height: 2.84vw;
                    display: inline-block;
                    visibility: visible;
                    font-size: 1.39vw;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(-45deg);
                    p{
                        color: #222222;
                    }
                }
            }
            .home:hover {
                visibility: visible;
                color: red;
            }
        }
    }
    section .phone {
        width: 100vw;
        height: 43.89vw;
        background-color: #222222;
        .text {
            width: 87.22vw;
            height: 38.68vw;
            margin: 0 auto;
            display: flex;
            .contant1 {
                width: 34.61vw;
                height: 39.1vw;
                .climb {
                    text-align: right;
                    img {
                        width: 22.71vw;
                    }
                }
                .list {
                    display: flex;
                    justify-content: space-between;
                    .game1 {
                        border-radius: 50%;
                        overflow: hidden;
                        width: 7.22vw;
                        height: 7.22vw;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
            .contant2 {
                width: 17.99vw;
                height: 39.1vw;
                display: flex;
                position: relative;
                img {
                    width: 100%;
                    align-items: end;
                }
                img:nth-child(2) {
                    position: absolute;
                    width: 14.93vw;
                    height: 29vw;
                    left: 1.7vw;
                    top: 4.8vw;
                }
            }
            .contant3 {
                width: 34.61vw;
                height: 39.1vw;
                .cod {
                    width: 34.61vw;
                    height: 31.7vw;
                    display: flex;
                    align-items: center;
                    margin-left: 2vw;
                    .cod1 {
                        p:nth-child(1){
                            line-height: 2.32vw;
                            font-size: 2.71vw;
                            color: #2ce4ca;
                        }
                        p:nth-child(2){
                            line-height: 2.32vw;
                            font-size: 2.71vw;
                            color: #2ce4ca;
                        }
                        p:nth-child(3){
                            line-height: 2.32vw;
                            font-size: 0.97vw;
                            color: #2ce4ca;
                        }
                        p:nth-child(4){
                            line-height: 2.32vw;
                            font-size: 0.97vw;
                            color: #2ce4ca;
                        }
                        img {
                            line-height: 2.32vw;
                        }
                    }
                }
                .list {
                    display: flex;
                    justify-content: space-between;
                    .game1 {
                        border-radius: 50%;
                        overflow: hidden;
                        width: 7.22vw;
                        height: 7.22vw;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
    nav {
        position: relative;
        img:first-child{
            margin-left: 3.54vw;
        }
        .youxi{
            position: absolute;
            left: 88.19vw;
            top: 21.6vw;
        }
        .one {
            width: 65.07vw;
            height: 20.14vw;
            margin: 0 auto;
            margin-top: 3.82vw;
            display: flex;
            justify-content: space-around;
            .the {
                width: 14.51vw;
                height: 20.14vw;
                text-align: center;
                transition: transform 3s;
                .iii{
                    margin: 0 auto;
                    width: 10.76vw;
                    height: 12.29vw;
                    position: relative;
                    img{
                        margin-left: 0;
                        width: 100%;
                    }
                    .then{
                        position: absolute;
                        left: 6vw;
                        top:-3vw;
                    }
                }
                h3{
                    font-size: 1.53vw;
                }
                p{
                    font-size: 0.97vw;
                    color: #939597;
                }
            }
            .the:hover{
                transform: rotateY(360deg);
            }
        }
        .turn {
            width: 65.07vw;
            height: 37.29vw;
            margin: 0 auto;
            margin-top: 7.92vw;
            .foot {
                height: 6.29vw;
                width: 65.07vw;
                .d1{
                    position: absolute;
                    left: 86vw;
                    top: 60vw;
                    margin: auto;
                    width: 140px;
                    height: 160px;
                    background: url(../img/first/1.png) no-repeat;
                    /* background-position: 0px -130px; */
                    animation: a1 0.5s steps(3) infinite;
                }
                @keyframes a1 {
                    0% {
                        background-position: 0px 0px;
                    }

                    100%{
                        background-position: -420px 0px;
                    }
                }
                h3{
                    display: inline-block;
                    font-size: 2.43vw;
                }
                span{
                    display: inline-block;
                    width: 38vw;
                    font-size: 0.83vw;
                    color: #a7a7a7;
                }
            }
            .gg {
                width: 65.07vw;
                height: 30.92vw;
                display: flex;
                justify-content: space-between;
                .plag {
                    width: 20.49vw;
                    height: 30.92vw;
                    overflow: hidden;
                    position: relative;
                    perspective: 800px;
                    img{
                        width: 100%;
                        margin-left: 0;
                        z-index: -1;
                        transform-origin: center bottom;
                        transition: transform 1s;
                    }
                    .fan{
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    .shop{
                        position: absolute;
                        top: 1.25vw;
                        left: 15.07vw;
                        .shop1{
                            background-color: #00e9f9;
                        }
                    }
                }
                .plag:hover img{
                    transform: rotateX(80deg);
                }
            }
        }
        .lottery {
            width: 65.07vw;
            height: 37.29vw;
            margin: 0 auto;
            margin-top: 7.08vw;
        }
        .shary {
            width: 65.07vw;
            height: 32.64vw;
            margin: 0 auto;
            margin-top: 7.5vw;
            .fly {
                width: 65.07vw;
                height: 7.02vw;
                h3{
                    display: inline-block;
                    font-size: 2.43vw;
                }
                span{
                    display: inline-block;
                    width: 38vw;
                    font-size: 0.83vw;
                    color: #a7a7a7;
                }
            }
            .plane {
                width: 65.07vw;
                height: 11.88vw;
                .oct:nth-child(1) {
                    float: left;
                    width: 31.67vw;
                    height: 11.88vw;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .mad{
                        width: 3.82vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                    .trd{
                        text-align: right;
                        h4{
                            font-size: 1.11vw;
                        }
                        p{
                            font-size: 0.83vw;
                            color: #7c7c7c;
                        }
                    }
                    .hd{
                        width: 10.83vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                }
                .oct:nth-child(2) {
                    float: right;
                    width: 31.67vw;
                    height: 11.88vw;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .mad{
                        width: 3.82vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                    .trd{
                        text-align: right;
                        h4{
                            font-size: 1.11vw;
                        }
                        p{
                            font-size: 0.83vw;
                            color: #7c7c7c;
                        }
                    }
                    .hd{
                        width: 10.83vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                }
            }
            .plane1 {
                width: 65.07vw;
                height: 11.88vw;
                margin-top: 1.88vw;
                .oct:nth-child(1) {
                    display: flex;
                    float: left;
                    width: 31.67vw;
                    height: 11.88vw;
                    justify-content: space-between;
                    align-items: center;
                    .mad{
                        width: 3.82vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                    .trd{
                        text-align: right;
                        h4{
                            font-size: 1.11vw;
                        }
                        p{
                            font-size: 0.83vw;
                            color: #7c7c7c;
                        }
                    }
                    .hd{
                        width: 10.83vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                }
                .oct:nth-child(2) {
                    float: right;
                    width: 31.67vw;
                    height: 11.88vw;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .mad{
                        width: 3.82vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                    .trd{
                        text-align: right;
                        h4{
                            font-size: 1.11vw;
                        }
                        p{
                            font-size: 0.83vw;
                            color: #7c7c7c;
                        }
                    }
                    .hd{
                        width: 10.83vw;
                        height: 11.88vw;
                        img{
                            height: 100%;
                            margin-left: 0;
                        }
                    }
                }
            }
        }
    }
    footer{
        margin-top: 18.3vw;
        height: 5.42vw;
        background-color: #08cacc;
        img:first-child{
            width: 82.1vw;
            left: 5vw;
            float: left;
            margin-top: -13.3vw;
        }
        img:last-child{
            width: 16.46vw;
            height: 14.5vw;
            float: right;
            margin-top: -9.3vw;
        }
    }
}

